<template>
  <div ref="zz" :class="className" :style="{height:height,width:width}" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'
// import walden from './walden.js'

export default {
  mixins: [resize],
  props: {
    chartData: {
      type: Object,
      required: true
    },
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'zz'
    },
    width: {
      type: String,
      default: '750px'
    },
    height: {
      type: String,
      default: '400px'
    }
  },
  data() {
    return {
      chart: null,
      showSeries: {},
      op: {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          top: '5%',
          data: this.chartData.legend_data
          // data: [
          //   "Direct",
          //   "Mail Ad",
          //   "Affiliate Ad",
          //   "Video Ad",
          //   "Search Engine",
          // ],
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chartData.xAxis_type,
          inverse: true// 倒叙
          // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: 'value'

        },
        series: [
          {
            type: 'bar', // 添加该属性
            label: { show: true, position: 'top' }
          }
        ]
        // series: [
        // {
        //   name: "Direct",
        //   type: "bar",
        //   stack: "total",
        //   label: {
        //     show: true,
        //   },
        //   emphasis: {
        //     focus: "series",
        //   },
        //   data: [320, 302, 301, 334, 390, 330, 320],
        // },
        //  x
        //   {
        //     name: "Affiliate Ad",
        //     type: "bar",
        //     stack: "total",
        //     label: {
        //       show: true,
        //     },
        //     emphasis: {
        //       focus: "series",
        //     },
        //     data: [220, 182, 191, 234, 290, 330, 310],
        //   },
        //   {
        //     name: "Video Ad",
        //     type: "bar",
        //     stack: "total",
        //     label: {
        //       show: true,
        //     },
        //     emphasis: {
        //       focus: "series",
        //     },
        //     data: [150, 212, 201, 154, 190, 330, 410],
        //   },
        //   {
        //     name: "Search Engine",
        //     type: "bar",
        //     stack: "total",
        //     label: {
        //       show: true,
        //     },
        //     emphasis: {
        //       focus: "series",
        //     },
        //     data: [820, 832, 901, 934, 1290, 1330, 1320],
        //   },
        // ],
      }
    }
  },
  watch: {
    chartData(newV, oldV) {
      this.initChart()
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    assignmentData(cData) {
      const series = []
      const series_data = this.chartData.series_data
      if (cData) {
        if (cData.length !== 0) {
          cData.forEach(function(item) {
            series.push(
              {
                name: item,
                type: 'bar',
                stack: 'total',
                label: {
                  show: true
                },
                emphasis: {
                  focus: 'series'
                },
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      formatter(p) {
                        return p.value > 0 ? p.value : ''
                      }
                    }
                  }
                },
                data: series_data[item]
              }
            )
          })
          // series.push({
          //   name: "总计",
          //   type: "bar",
          //   barGap: "-100%", // 左移100%，stack不再与上面两个在一列
          //   label: {
          //     normal: {
          //       show: true, //显示数值
          //       position: "top", //  位置设为top
          //       formatter: "{c}",
          //       textStyle: { color: "#000" }, //设置数值颜色
          //     },
          //   },
          //   data: [],
          // });
          this.showSeries = series
        }
      }
    },
    initChart() {
      /* eslint-disable */
      this.chart = echarts.init(this.$refs.zz, 'walden')
      this.op.legend.data = this.chartData.legend_data;
      this.op.xAxis.data = this.chartData.xAxis_type;
      this.assignmentData(this.chartData.legend_data);
      if (this.showSeries.length > 0) {//首次渲染会提示series.type相关报错
        this.op.series = this.showSeries;
        this.chart.clear();
        this.chart.setOption(this.op);
      }
      /* eslint-disable */
    },
  }
}
</script>
